<!-- 主题设置模板 -->


<div id="app" style="margin-top:20px">
  <div class="layui-container">

    <div class="layui-col-md12">
      <div class="layui-card">
        <div class="layui-card-header">日期列表</div>
        <div class="layui-card-body">

          <div class="layui-btn-container">
            <div class="LAY-app-message-btns">
              <button class="layui-btn" @click="showAdd">添加日期</button>
            </div>
            <table class="layui-table" lay-even>
              <colgroup>
                <col width="80">
                <col width="250">

                <col>

              </colgroup>
              <thead>
                <tr>
                  <th>序号</th>
                  <th>名称</th>

                  <th>操作</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="(item, index) in dataList">
                  <td>{{1+index}}</td>
                  <td>{{item.name}}</td>


                  <td>
                    <span class="layui-btn layui-bg-red " style=" margin-bottom: 0px;" @click="delSubmit(item)"><i
                        class="layui-icon layui-icon-delete"></i>删除</span>

                    <span class="layui-btn layui-btn-normal " style=" margin-bottom: 0px;" @click="showEdit(item)"><i
                        class="layui-icon layui-icon-edit"></i>编辑</span>


                    <span class="layui-btn" style=" margin-bottom: 0px;" @click="goto(item)"><i
                        class="layui-icon layui-icon-username"></i>添加标签</span>
                  </td>
                </tr>
              </tbody>
            </table>

          </div>

        </div>
      </div>
    </div>

  </div>
</div>



<script>
  //若需用到 layui 组件，layui.use 需写在该全局方法里面，如：
  layui.use(['admin', 'fileServiceApi', 'view'], function () {

    var admin = layui.admin;
    var fileServiceApi = layui.fileServiceApi;
    var view = layui.view;

    var myApp = new Vue({
      el: '#app',
      data: function () {
        return {
          dataList: []
        }
      }
      , methods: {

        goto(data) {
          location.hash = '/video/showTabtList/id=' + data.id;
        },
        async getData() {
          re = await fileServiceApi.getTimeTabList();
          this.dataList = re.data;
        },
        async addSubmit(data) {
          let res = await fileServiceApi.createTimeTab(data)
          if (res.isSuccess) {
            layer.msg(res.msg)
            this.getData();
            layer.closeAll()
          } else {
            layer.msg(res.msg)
          }
        },
        async editSubmit(data) {
          let res = await fileServiceApi.updateTimeTab(data)
          if (res.isSuccess) {
            layer.msg(res.msg)
            this.getData();
            layer.closeAll('page'); // 关闭所有的页面层
          } else {
            layer.msg(res.msg)
          }
        },
        async delSubmit(data) {
          // 使用 layer.confirm 方法弹出确认框
          layer.confirm('确定要删除该信息吗？', {
            title: '删除确认',
            btn: ['确定', '取消'] // 按钮
          }, async (index) => {
            // 用户点击“确定”按钮时执行的代码
            let res = await fileServiceApi.deleteTimeTab(data);
            if (res.isSuccess) {
              layer.msg(res.msg);
              this.getData();
            } else {
              layer.msg(res.msg);
            }
            layer.closeAll(); // 关闭弹窗
          }, function () {
            // 用户点击“取消”按钮时执行的代码
            layer.closeAll(); // 关闭弹窗
          });
        },
        showAdd() {
          admin.popup({
            title: '添加日期',
            area: ['500px', '300px'],
            id: 'LAY-popup-message-add',
            success: function (layero, index) {
              view(this.id).render('video/addTimeTabFrom', { addSubmit: myApp.addSubmit })
            }
          })
        },
        showEdit(data) {
          admin.popup({
            title: '编辑日期',
            area: ['500px', '300px'],
            id: 'LAY-popup-message-edit',
            success: function (layero, index) {
              view(this.id).render('video/editTimeTabFrom', { addSubmit: myApp.editSubmit, 'data': data })
            }
          })
        }
      },
      mounted: function () {
        // this.getData();
      },
      created: function () {
        this.getData();
      },

    });

  });

</script>